<template>
	<view>
		<panel title="日期">
			<z-picker
				v-model="dateVal"
				mode="date"
				@change="onChange"
			>
			</z-picker>
		</panel>
		<panel title="单列">
			<z-picker
				:items="singlePicker"
				v-model="singleValue"
				@change="onChange"
			>
			</z-picker>
		</panel>
		<panel title="多列">
			<z-picker
				:items="items"
				v-model="value"
				mode="multiSelector"
				@change="onChange"
			>
			</z-picker>
		</panel>
		<panel title="二级联动">
			<picker-linkage
				:items="linkageItems"
				v-model="linkageValue"
				@change="onChange"
			>
			</picker-linkage>
		</panel>
		<panel title="多级联动">
			<picker-linkage
				:items="linkageItems2"
				v-model="linkageValue2"
				@change="onChange"
			>
			</picker-linkage>
		</panel>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateVal: '2019-05-20',
				// 单列
				singlePicker: [
					{value: 'us', label: '美国'},
					{value: 'zh', label: '中国'},
					{value: 'ba', label: '巴西'},
					{value: 'jp', label: '日本'}
				],
				singleValue: 1,
				
				// 非联动
				items: [
					[
						{value: 'us', label: '美国'},
						{value: 'zh', label: '中国'},
						{value: 'ba', label: '巴西'},
						{value: 'jp', label: '日本'}
					],[
						{value: 'us', label: '美国'},
						{value: 'zh', label: '中国'},
						{value: 'ba', label: '巴西'},
						{value: 'jp', label: '日本'}
					],
				],
				value: [2, 1],
				// 联动，children必传
				linkageItems: [
					{
						value: 1,
						label: '哺乳动物',
						children: [
							{value: '1-1', label: '大象'},
							{value: '1-2', label: '老虎'},
							{value: '1-3', label: '狮子'},
							{value: '1-4', label: '狗'}
						]
					},{
						value: 2,
						label: '爬行动物',
						children: [
							{value: '2-1', label: '蛇'},
							{value: '2-2', label: '蜥蜴'},
							{value: '2-3', label: '壁虎'},
							{value: '2-4', label: '龟'},
							{value: '2-5', label: '鳄鱼'}
						]
					},{
						value: 3,
						label: '飞禽动物',
						children: [
							{value: '3-1', label: '老鹰'},
							{value: '3-2', label: '鸽子'},
							{value: '3-3', label: '巴哥'},
							{value: '3-4', label: '麻雀'},
							{value: '3-5', label: '蜂鸟'}
						]
					}
				],
				// [0, 1] 表示 哺乳动物 大象
				// [1, 3] 表示 爬行动物 龟
				// 有多少列，就必须传多少元素
				linkageValue: [1, 3],
				
				linkageItems2: [
					{
						value: 1,
						label: '哺乳动物',
						children: [
							{value: '1-1', label: '大象', children: [
								{value: '2-1', label: '大象1'},
								{value: '2-2', label: '大象2'},
								{value: '2-3', label: '大象3'},
								{value: '2-4', label: '大象4'},
								{value: '2-5', label: '大象5'}
							]},
							{value: '1-2', label: '老虎', children: [
								{value: '2-1', label: '老虎1'},
								{value: '2-2', label: '老虎2'},
								{value: '2-3', label: '老虎3'},
								{value: '2-4', label: '老虎4'},
								{value: '2-5', label: '老虎5'}
							]},
							{value: '1-3', label: '狮子', children: [
								{value: '2-1', label: '狮子1'},
								{value: '2-2', label: '狮子2'},
								{value: '2-3', label: '狮子3'},
								{value: '2-4', label: '狮子4'},
								{value: '2-5', label: '狮子5'}
							]},
							{value: '1-4', label: '狗', children: [
								{value: '2-1', label: '狗1'},
								{value: '2-2', label: '狗2'},
								{value: '2-3', label: '狗3'},
								{value: '2-4', label: '狗4'},
								{value: '2-5', label: '狗5'}
							]}
						]
					},{
						value: 2,
						label: '爬行动物',
						children: [
							{value: '2-1', label: '蛇', children: [
								{value: '2-1', label: '蛇1'},
								{value: '2-2', label: '蛇2'},
								{value: '2-3', label: '蛇3'},
								{value: '2-4', label: '蛇4'},
								{value: '2-5', label: '蛇5'}
							]},
							{value: '2-2', label: '蜥蜴', children: [
								{value: '2-1', label: '蜥蜴1'},
								{value: '2-2', label: '蜥蜴2'},
								{value: '2-3', label: '蜥蜴3'},
								{value: '2-4', label: '蜥蜴4'},
								{value: '2-5', label: '蜥蜴5'}
							]},
							{value: '2-3', label: '壁虎', children: [
								{value: '2-1', label: '壁虎1'},
								{value: '2-2', label: '壁虎2'},
								{value: '2-3', label: '壁虎3'},
								{value: '2-4', label: '壁虎4'},
								{value: '2-5', label: '壁虎5'}
							]},
							{value: '2-4', label: '龟', children: [
								{value: '2-1', label: '龟1'},
								{value: '2-2', label: '龟2'},
								{value: '2-3', label: '龟3'},
								{value: '2-4', label: '龟4'},
								{value: '2-5', label: '龟5'}
							]},
							{value: '2-5', label: '鳄鱼', children: [
								{value: '2-1', label: '鳄鱼1'},
								{value: '2-2', label: '鳄鱼2'},
								{value: '2-3', label: '鳄鱼3'},
								{value: '2-4', label: '鳄鱼4'},
								{value: '2-5', label: '鳄鱼5'}
							]}
						]
					},{
						value: 3,
						label: '飞禽动物',
						children: [
							{value: '3-1', label: '老鹰', children: [
								{value: '2-1', label: '老鹰1'},
								{value: '2-2', label: '老鹰2'},
								{value: '2-3', label: '老鹰3'},
								{value: '2-4', label: '老鹰4'},
								{value: '2-5', label: '老鹰5'}
							]},
							{value: '3-2', label: '鸽子', children: [
								{value: '2-1', label: '鸽子1'},
								{value: '2-2', label: '鸽子2'},
								{value: '2-3', label: '鸽子3'},
								{value: '2-4', label: '鸽子4'},
								{value: '2-5', label: '鸽子5'}
							]},
							{value: '3-3', label: '巴哥', children: [
								{value: '2-1', label: '巴哥1'},
								{value: '2-2', label: '巴哥2'},
								{value: '2-3', label: '巴哥3'},
								{value: '2-4', label: '巴哥4'},
								{value: '2-5', label: '巴哥5'}
							]},
							{value: '3-4', label: '麻雀', children: [
								{value: '2-1', label: '麻雀1'},
								{value: '2-2', label: '麻雀2'},
								{value: '2-3', label: '麻雀3'},
								{value: '2-4', label: '麻雀4'},
								{value: '2-5', label: '麻雀5'}
							]}
						]
					}
				],
				linkageValue2: [0, 0, 0]
			}
		},
		methods: {
			onChange(e){
				console.log(e.detail)
			}
		}
	}
</script>

<style lang="scss">
page{
	background: $page-bg;
}
</style>
